<template>
  <div class="bgMain" ref="bgMain">
    <div>
      <canvas id="one" width="100" height="100" class="one" @mousedown="move " @mousewheel=mouse ref="one"></canvas>
    </div>
    <div style="margin-left: 100px;">
      <canvas id="two" width="100" height="100" class="two" @mousedown="move" @mousewheel=mouse ref="two"></canvas>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight,
      offsetWidth: document.documentElement.clientWidth,
      positionX: 0,
      positionY: 0,
      current: 0
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      console.log(this.current);
      this.pto_one()
      this.pto_two()
    },
    pto_one (num) {
      var bg = document.getElementById('one');
      var ctx = bg.getContext('2d');
      var height = 50 * Math.sin(Math.PI / 3);//计算等边三角形的高

      if (num) {
        ctx.clearRect(0, 0, 100, 100) //清楚画布
        ctx.translate(50, height)  //设置中心点
        ctx.rotate((Math.PI / 180) * 90)  //旋转45
        ctx.translate(-50, -height)  //重置中心点
      }

      //填充三角形（等边）
      ctx.beginPath();
      ctx.moveTo(25, 0); // 开始
      ctx.lineTo(0, height);// 线
      ctx.lineTo(50, height); // 线
      ctx.fillStyle = 'red';// 填充颜色
      ctx.fill(); //闭合形状并且以填充方式绘制出来

      ctx.beginPath();
      ctx.moveTo(25, 0);
      ctx.lineTo(75, 0);
      ctx.lineTo(50, height);
      ctx.fillStyle = 'red';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(75, 0);
      ctx.lineTo(100, height);
      ctx.lineTo(50, height);
      ctx.fillStyle = 'red';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(0, height);
      ctx.lineTo(50, height);
      ctx.lineTo(25, 2 * height);
      ctx.fillStyle = 'red';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(50, height);
      ctx.lineTo(75, 2 * height);
      ctx.lineTo(25, 2 * height);
      ctx.fillStyle = 'red';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(50, height);
      ctx.lineTo(100, height);
      ctx.lineTo(75, 2 * height);
      ctx.fillStyle = 'red';
      ctx.fill();


    },
    pto_two (num) {

      var bg = document.getElementById('two');
      var ctx = bg.getContext('2d');
      var height = 50 * Math.sin(Math.PI / 3);//计算等边三角形的高

      if (num) {
        ctx.clearRect(0, 0, 100, 100) //清楚画布
        ctx.translate(50, height)  //设置中心点
        ctx.rotate((Math.PI / 180) * 90)  //旋转45
        ctx.translate(-50, -height)  //重置中心点
      }

      //填充三角形（等边）
      ctx.beginPath();

      ctx.moveTo(0, 0); // 开始
      ctx.lineTo(50, 0);// 线
      ctx.lineTo(25, height); // 线
      ctx.fillStyle = 'green';// 填充颜色
      ctx.fill(); //闭合形状并且以填充方式绘制出来

      ctx.beginPath();
      ctx.moveTo(50, 0);
      ctx.lineTo(25, height);
      ctx.lineTo(75, height);
      ctx.fillStyle = 'green';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(50, 0);
      ctx.lineTo(100, 0);
      ctx.lineTo(75, height);
      ctx.fillStyle = 'green';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(25, height);
      ctx.lineTo(0, 2 * height);
      ctx.lineTo(50, 2 * height);
      ctx.fillStyle = 'green';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(25, height);
      ctx.lineTo(75, height);
      ctx.lineTo(50, 2 * height);
      ctx.fillStyle = 'green';
      ctx.fill();

      ctx.beginPath();
      ctx.moveTo(75, height);
      ctx.lineTo(100, 2 * height);
      ctx.lineTo(50, 2 * height);
      ctx.fillStyle = 'green';
      ctx.fill();
    },
    move (e) {
      let name = e.target.id
      // console.log(e.which); // 1是左键 2是滑轮点击 3是右键
      let odiv = e.target;        //获取目标元素
      // 盒子高度

      // let boxWidth = this.$refs.one.offsetWidth
      // let boxHeight = this.$refs.one.offsetHeight
      let boxWidth = document.getElementsByClassName(name)[0].offsetWidth
      let boxHeight = document.getElementsByClassName(name)[0].offsetHeight
      // 页面背景高度
      let maxWidth = this.$refs.bgMain.offsetWidth
      let maxHeight = this.$refs.bgMain.offsetHeight
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {       //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;

        //绑定元素位置到positionX和positionY上面
        // 判断边界值
        if (maxWidth - boxWidth > left && left > 0) {
          this.positionX = left;
          odiv.style.left = left + 'px';
        }
        if (maxHeight - boxHeight > top && top > 0) {
          this.positionY = top;
          odiv.style.top = top + 'px';
        }

        //移动当前元素

      }
      document.onmouseup = (e) => { //鼠标移出事件
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    mouse (e) {
      let name = e.target.id
      if (name === 'one') {
        this.pto_one(1)
      } else if (name === 'two') {
        this.pto_two(1)
      }

      // let name = e.target.id
      // // e.wheelDelta 滚轮滚动上下判断，正左反右
      // console.log(e, '111');
      // console.log(e.wheelDelta, '==');
      // let div = document.getElementsByClassName(name)[0]
      // console.log(document.getElementsByClassName(name)[0].style.transform);
      // if (e.wheelDelta > 0) {
      //   div.style.transform = 'rotate(' + 180 + 'deg)';
      // } else {
      //   // current = (current - 90) % 360;
      //   div.style.transform = 'rotate(' + 360 + 'deg)';
      // }

    }
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
.bgMain {
  height: 100%;
  z-index: 999;
}
.one {
  position: absolute;
  z-index: 998;
}
.two {
  position: absolute;
  z-index: 998;
}
</style>